{include "INC_header.html" title="SSO/授权/授权记录"}
<div id="app-outlet" class="app-outlet">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="config.locale" :theme="config.theme">
        <div class="app-container padding">
            <header class="auto-height padding-bottom">
                <div class="border radius">
                    <div class="ui flex-item padding border-bottom light-border hover-background">
                        <div class="start">
                            <a-input-search
                                    v-model:value="keyword"
                                    placeholder="用户名/手机号/昵称"
                                    enter-button="搜索"
                                    @search="setKeyword"
                            />
                        </div>
                        <div class="start" v-if="listQueryParams.keyword != ''">
                            <a-button type="primary" danger @click="setKeyword('')">
                                <template #icon><i class="fa fa-close margin-right-half"></i></template>
                                清除搜索
                            </a-button>
                        </div>
                        <div class="center"></div>
                    </div>
                    <div class="ui form padding">
                        <div class="fields">
                            <div class="field">
                                <label class="label text-small">授权状态</label>
                                <a-radio-group v-model:value="listQueryParams.state" size="small" button-style="solid" @change="getList">
                                    <a-radio-button value="">全部</a-radio-button>
                                    <a-radio-button value="1">成功</a-radio-button>
                                    <a-radio-button value="0">失败</a-radio-button>
                                </a-radio-group>
                            </div>
                            <div class="field">
                                <label class="label text-small">账户状态</label>
                                <a-radio-group v-model:value="listQueryParams.userState" size="small" button-style="solid" @change="getList">
                                    <a-radio-button value="">全部</a-radio-button>
                                    <a-radio-button value="1">正常</a-radio-button>
                                    <a-radio-button value="2">待审核</a-radio-button>
                                    <a-radio-button value="3">未过审</a-radio-button>
                                    <a-radio-button value="0">已禁止</a-radio-button>
                                </a-radio-group>
                            </div>
                            <div class="field">
                                <label class="label text-small">每页数量</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.total" size="small" button-style="solid" @change="getList">
                                        <a-radio-button :value="30">30</a-radio-button>
                                        <a-radio-button :value="50">50</a-radio-button>
                                        <a-radio-button :value="100">100</a-radio-button>
                                        <a-radio-button :value="200">200</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <main class="flex-column overflow-hidden">
                <div class="ui table scroll-enable primary selectable" v-if="list.rows > 0">
                    <!-- 表格头部 -->
                    <div class="thead">
                        <div class="ui row">
                            <div class="col"v-for="column in columns" :class="{ 'auto-width':!column.width }" :style="column.width ? ('width:' + column.width) : null">{{ column.title }}</div>
                        </div>
                    </div>
                    <!-- 表格内容 -->
                    <div class="tbody">
                        <div class="ui row" v-for="(item, index) in list.list">
                            <div class="col justify-center" v-for="column in columns" :class="{ 'auto-width':!column.width }" :style="column.width ? ('width:' + column.width) : null">
                                <div class="ui flex-item" v-if="column.key === 'info'">
                                    <div class="start">
                                        <a-avatar :size="48" shape="square" :src="item.face"></a-avatar>
                                    </div>
                                    <div class="center">
                                        <div class=""><i class="fa-regular fa-at margin-right-half"></i> {{ item.nickname || '未设置昵称' }}</div>
                                        <div class="padding-top-half">
                                            <a-tooltip title="手机号码">
                                                <a-tag class="margin-right-half margin-bottom-half">
                                                    <template #icon><i class="fa-solid fa-mobile-screen margin-right"></i> </template>
                                                    <template v-if="item.phone != null && item.phone != ''">(+{{ item.countryCode }}) {{ item.phone }}</template>
                                                    <template v-else>未设置手机号码</template>
                                                </a-tag>
                                            </a-tooltip>
                                            <a-tooltip title="用户名">
                                                <a-tag class="margin-right-half margin-bottom-half">
                                                    <template #icon><i class="fa-regular fa-user margin-right"></i> </template>
                                                    <template v-if="item.username != null && item.username != ''">{{ item.username }}</template>
                                                    <template v-else>未设置用户名</template>
                                                </a-tag>
                                            </a-tooltip>
                                        </div>
                                        <div v-if="item.admin == 1">
                                            <a-tag color="orange">管理员</a-tag>
                                        </div>
                                        <div class="padding-top margin-top text-small danger-text" v-if="item.state == 0"><i class="fa fa-ban"></i> 该账户已被禁用</div>
                                    </div>
                                </div>
                                <div :class="item.state == 1 ? 'primary-text' : 'danger-text'" v-else-if="column.key === 'state'">{{ item.state == 1 ? '成功' : '失败'}}</div>
                                <template v-else>
                                    {{ item[column.dataIndex] || '-' }}
                                </template>
                            </div>
                        </div>
                    </div>
                    <!-- 表格底部 -->
                    <div class="tfoot padding" v-if="list.pages > 1">
                        {include "INC_page.html"}
                    </div>
                </div>
                <div class="empty-content" v-else>
                    <a-empty :image="simpleImage" description="没有授权记录"></a-empty>
                </div>
            </main>
        </div>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp } = Vue;
    const { message, Empty } = antd;
    const app = createApp({
        data() {
            return {
                config: window.appProviderConfig,
                //空图片
                simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
                //表头
                columns: [
                    { title:"账户", key:"info" },
                    { width:'150px', title:"授权方式", dataIndex:"type", key:"type"},
                    { width:'100px', title:"授权IP", dataIndex:"ip", key:"ip"},
                    { width:'80px', title:"授权状态", dataIndex:"state", key:"state" },
                    { width:'80px', title:"错误码", dataIndex:"errorCode", key:"errorCode" },
                    { width:'120px', title:"授权时间", dataIndex:"time", key:"time" },
                    { width:'120px', title:"过期时间", dataIndex:"expireTime", key:"expireTime" }
                ],
                //列表参数
                keyword: '',
                listQueryParams: {
                    state: '',
                    userState: '',
                    keyword: '',
                    page: 1,
                    total: 100
                },
                //数据
                list: {
                    rows: 0,
                    page: 1,
                    pages: 0,
                    list: []
                },
                //
                delLoading: false,
                saveLoading: false,
                //
                item: {
                    edit: false,
                    id: 0,
                    name: ''
                }
            }
        },
        mounted() {
            //挂载成功
            this.initData();
        },
        methods: {
            //方法
            initData: function () {
                //获取列表数据
                this.getList();
            },
            //获取列表
            getList : function (){
                let self = this;
                const hide = message.loading("正在加载数据");
                axios.get("{url url='/sso/api/admin/auth/list'}", {
                    params: this.listQueryParams
                }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.list = data.data;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("加载数据失败");
                });
            },
            //首页
            firstPage : function (){
                let page = parseInt(this.list.page);
                if(page > 1){
                    this.listQueryParams.page = 1;
                    this.getList();
                }
            },
            //上一页
            prevPage : function (){
                let page = parseInt(this.list.page);
                if(page > 1){
                    this.listQueryParams.page = page - 1;
                    this.getList();
                }
            },
            //下一页
            nextPage : function (){
                let page = parseInt(this.list.page);
                let pages = parseInt(this.list.pages);
                if(page < pages){
                    this.listQueryParams.page = page + 1
                    this.getList();
                }
            },
            //最后一页
            lastPage : function (){
                let page = parseInt(this.list.page);
                let pages = parseInt(this.list.pages);
                if(page < pages){
                    this.listQueryParams.page = pages;
                    this.getList();
                }
            },
            //设置跳到第几页
            setPage : function (page){
                page = isNaN(page) ? (page.target.value || -1) : parseInt(page);
                page = page > 0 ? page : -1;
                if(page === -1){
                    message.error('参数错误');
                } else {
                    this.listQueryParams.page = page;
                    this.getList();
                }
            },
            //设置参数，重载列表
            setListQueryParam : function (params){
                //通过替换key值的方式
                for(let key in params){
                    this.listQueryParams[key] = params[key];
                }
                this.getList();
            },
            //搜索
            setKeyword: function (value){
                if(this.listQueryParams.keyword !== value){
                    this.listQueryParams.keyword = value;
                    this.getList();
                }
                if (value === '') {
                    this.keyword = '';
                }
            },
            //清除搜索
            cleanKeyword: function (){
                this.keyword = '';
                this.listQueryParams.keyword = '';
                this.getList();
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
    //
    if (window.parent.length > 0) {
        window.parent.postMessage({
            event: "location",
            data: [
                { name:"授权" },
                { name:"授权记录" }
            ]
        });
    }
</script>
{include "INC_footer.html"}